<template>
  <!--  顶部导航 start-->
  <TopNav title="注册"/>
  <!--  顶部导航 end-->
  <!--  选择 start-->
<!--  <div class="choice">-->
<!--    <p @click="choice1=true">快速注册</p>-->
<!--    <p @click="choice1=false">实名注册</p>-->
<!--  </div>-->
  <!--   选择 end-->
  <!--  快速注册 start-->
  <div class="form" v-show="choice1">
    <el-input v-model="userForm.nickname" class="input" placeholder="*请输入昵称"></el-input>
    <el-input v-model="userForm.phone" class="input" placeholder="请输入手机号">
<!--      <template #append>-->
<!--        <el-button>获取验证码</el-button>-->
<!--      </template>-->
    </el-input>
<!--    <el-input class="input" placeholder="*请输入验证码"></el-input>-->
    <el-input v-model="userForm.username" class="input" placeholder="*请输入用户名"></el-input>
    <el-input v-model="userForm.password" class="input" placeholder="*密码"></el-input>
<!--    <el-input class="input" placeholder="*确认密码"></el-input>-->
    <p>*密码需8~32个字符，必须同时包含字母、数字、特殊字符。注:特殊字符仅包含以下字符~!@#$^&*</p>
    <el-button @click="registerHandle" class="button" color="#3ddadd">注册</el-button>
    <div class="agreement">
      <el-switch class="radio" v-model="radio"/>
      <h1>我已阅读并同意<span>《用户协议》</span>和<span>《隐私协议》</span></h1>
    </div>
  </div>
  <!--  快速注册 end-->
  <!--  实名注册 start-->
  <div class="form" v-show="!choice1">
    <el-input class="input" placeholder="请输入手机号">
      <template #append>
        <el-button>获取验证码</el-button>
      </template>
    </el-input>
    <el-input class="input" placeholder="*请输入验证码"></el-input>
    <el-input class="input" placeholder="*密码"></el-input>
    <el-input class="input" placeholder="*确认密码"></el-input>
    <p>*密码需8~32个字符，必须同时包含字母、数字、特殊字符。注:特殊字符仅包含以下字符~!@#$^&*</p>
    <el-input class="input" placeholder="*真实姓名"></el-input>
    <el-input class="input" placeholder="*身份证号"></el-input>
    <el-button class="button" color="#3ddadd">注册</el-button>
    <div class="agreement">
      <el-switch class="radio" v-model="radio"/>
      <h1>我已阅读并同意<span>《用户协议》</span>和<span>《隐私协议》</span></h1>
    </div>
  </div>
  <!--  实名注册 end-->

</template>

<script setup>
import {reactive, ref} from "vue";
import {useRouter} from 'vue-router'
import userAxios from "@/api/user.js";
import TopNav from "@/components/TopNav/Index.vue"
const router = useRouter()
const onClickLeft = () => history.back();
const choice1 = ref(true)
//同意协议
const radio = ref(true)
const userForm = reactive({
  nickname: '',
  phone: '',
  username: '',
  password: '',
})
/**
 * 注册
 */
const registerHandle = () => {
  if (userForm.nickname.length > 0 && userForm.password.length > 0 && userForm.phone > 0 && userForm.username.length > 0) {
    userAxios.user_register({
      nickname: userForm.nickname,
      phone: userForm.phone,
      username: userForm.username,
      password: userForm.password,
    }).then(res => {
      if (res.data.code == 200) {
        router.push("/home/login")
        ElMessage.success('注册成功！！')
      }
    })
  } else {
    ElMessage.error('信息不完整')
  }
}
</script>

<style scoped lang="scss">
.choice {
  display: flex;
  background-color: #ffffff;
  padding: 10px;

  p {
    margin-left: 50px;
    margin-right: 50px;
    font-size: 15px;
    font-weight: bolder;
  }

  p:hover {
    color: #017f95;
  }
}

.form {
  margin-top: 2px;
  background-color: #ffffff;

  .input {
    margin: 3%;
    width: 94%;
    height: 40px;
  }

  p {
    margin: 20px;
  }

  .button {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 3%;
    width: 94%;
    height: 40px;
    color: #ffffff;
  }

  .agreement {
    display: flex;
    padding-left: 5%;
    padding-bottom: 500px;

    .radio {
      margin-right: 10px;
    }

    h1 {
      margin-top: 5px;

      span {
        color: #2d8497;
      }
    }
  }
}
</style>
